<template>
  <div>
    <el-button class="qc-list-btn" type="primary" @click.stop="back"
      >返回</el-button
    >
    <Table
      ref="tableRef"
      :url="URL_PAGINGENTITY"
      :columns="data.columns"
      :handles="data.handles"
      :toolbar="data.toolbar"
      :query="data.query"
      :params="{ couponId: id }"
      select
    ></Table>
    <DialogWriteOff
      ref="dialogWriteOffRef"
      @get-data="getTable"
    ></DialogWriteOff>
    <DialogDetailVoided
      ref="dialogDetailVoidedRef"
      @get-data="getTable"
    ></DialogDetailVoided>
  </div>
</template>

<script lang="ts" setup >
import Table from '@/components/table/index.vue';
import DialogWriteOff from './dialogWriteOff.vue';
import DialogDetailVoided from './dialogDetailVoided.vue';
import { queryDicByParent } from '@/service/apis/api';
import { URL_PAGINGENTITY, EXPORT_ENTITY } from '@/service/apis/market';
import { exportFile } from '@/utils/utils';

const router = useRouter();
const route = useRoute();
const {
  query: { id },
} = route;

const tableRef = ref();
const dialogWriteOffRef = ref();
const dialogDetailVoidedRef = ref();

queryDicByParent({
  listDtos: ['couponEntityStatus', 'expireStatus'],
}).then((res: any) => {
  if (res) {
    data.columns[1].dic = [...res.couponEntityStatus];
    data.columns[2].dic = [...res.expireStatus];
    data.query[1].props.options = [...res.couponEntityStatus];
    data.query[2].props.options = [...res.expireStatus];
  }
});

const data = reactive({
  columns: [
    {
      prop: 'couponNumber',
      label: '优惠券编号',
    },
    {
      prop: 'status',
      label: '使用状态',
      dic: [] as any,
      type: Number,
    },
    {
      prop: 'expireStatus',
      label: '是否过期',
      dic: [] as any,
      type: Number,
    },
    {
      prop: 'userNumber',
      label: '发放用户',
    },
    {
      prop: 'orgName',
      label: '用户所属企业',
    },
    {
      prop: 'relName',
      label: '关联活动/任务',
    },
    {
      prop: 'createTime',
      label: '发放时间',
    },
    {
      prop: 'writeOffTime',
      label: '核销时间',
    },
    {
      prop: 'orderId',
      label: '关联订单',
    },
    {
      prop: 'remark',
      label: '备注',
    },
  ],
  handles: [
    {
      label: '手动核销',
      permission: 'couponList.writeOff',
      disabledFun: (row: any) => {
        return row.status !== 0;
      },
      handle: (row: any) => {
        console.log('手动核销 ---', row);
        dialogWriteOffRef.value?.show(row);
      },
    },
    {
      label: '作废',
      permission: 'couponList.cancel',
      disabledFun: (row: any) => {
        return row.status !== 0 || row.expireStatus !== 0;
      },
      handle: (row: any) => {
        console.log('作废 ---', row);
        dialogDetailVoidedRef.value?.show(1, row.id);
      },
    },
  ],
  toolbar: [
    {
      label: '导出',
      permission: 'couponList.export',
      icon: 'icon-export',
      type: 'primary',
      handle: (row: any) => {
        exportFile(EXPORT_ENTITY, '优惠券发放明细', tableRef.value?.getForm());
      },
    },
    {
      label: '批量作废',
      permission: 'couponList.batchCancel',
      type: 'primary',
      handle: (row: any) => {
        const data = tableRef.value?.getSelectData();
        console.log('row----', data, data.length);
        if (data.length === 0) {
          ElMessage({
            showClose: true,
            message: '请勾选需要批量作废的优惠券',
            type: 'warning',
          });
          return;
        } else {
          let arr = [] as any;
          data.forEach((item: any) => {
            arr.push(item.id);
          });
          dialogDetailVoidedRef.value?.show(2, arr);
        }
      },
    },
  ],
  query: [
    {
      label: '优惠券编号',
      prop: 'couponNumber',
      comName: 'input',
      props: {
        placeholder: '请输入优惠券编号',
      },
    },
    {
      label: '使用状态',
      prop: 'status',
      comName: 'select',
      props: {
        placeholder: '请选择使用状态',
        options: [] as any,
      },
    },
    {
      label: '是否过期',
      prop: 'expireStatus',
      comName: 'select',
      props: {
        placeholder: '请选择是否过期',
        options: [] as any,
      },
    },
    {
      label: '发放用户',
      prop: 'userNumber',
      comName: 'input',
      props: {
        placeholder: '请输入发放用户',
      },
    },
    {
      label: '用户所属企业',
      prop: 'orgName',
      comName: 'input',
      props: {
        placeholder: '请输入用户所属企业',
      },
    },
    {
      label: '关联活动',
      prop: 'relName',
      comName: 'input',
      props: {
        placeholder: '请输入关联活动',
      },
    },
    {
      label: '发放时间',
      prop: 'time',
      comName: 'date',
      keys: ['startTime', 'endTime'],
      props: {
        type: 'daterange',
      },
    },
    {
      label: '核销时间',
      prop: 'writeOffTime',
      comName: 'date',
      keys: ['writeOffStartTime', 'writeOffEndTime'],
      props: {
        type: 'daterange',
      },
    },
  ],
});
const getTable = () => {
  tableRef.value?.getData();
};

const back = () => {
  router.go(-1);
};
</script>
